// 企业列表设置组件
<template>
  <div class="enterpriseList_set">
    <el-dialog v-model="dialogVisible" title="知识库设置" width="600px" :before-close="onClose" destroy-on-close @open="dialogOpen">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div class="basic_information">
            <el-form ref="formRef" label-position="top" label-width="auto" :model="formLabelAlign" style="max-width: 600px" :rules="rules">
              <el-form-item label="知识库名称" prop="realName">
                <el-input v-model="formLabelAlign.realName" />
              </el-form-item>
              <el-form-item label="知识分类" prop="classify">
                <el-select v-model="formLabelAlign.classify" placeholder="请选择知识分类" style="width: 240px">
                  <el-option v-for="item in wiki_type" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="外部知识库地址"  prop="location" v-if="isShowLocation">
                 <el-input v-model="formLabelAlign.location" placeholder="请输入地址" />
              </el-form-item>
              <el-form-item label="排序" prop="sort">
                <el-input-number v-model="formLabelAlign.sort"  :min="1" :max="99"></el-input-number>
              </el-form-item>
              <el-form-item label="简介" prop="remarks">
                <el-input type="textarea" v-model="formLabelAlign.remarks" />
              </el-form-item>
              <el-form-item label="封面" prop="remarks">
                <!-- <div class="cover_box">
                  <div class="cover_img">
                    <img :src="imgSrc(formLabelAlign.imageUrl)" alt="" />
                    <div class="cover_img_text">
                      <p>{{ formLabelAlign.realName }}</p>
                      <span>{{ formLabelAlign.remarks }}</span>
                    </div>
                  </div>
                  <div class="cover_list">
                    <div class="cover_list_item">
                      <p>封面列表</p>
                      <div class="cover_list_img">
                        <img
                          :src="item.url"
                          alt=""
                          @click="formLabelAlign.imageUrl = item.name"
                          v-for="item in imgList"
                          :key="item.name"
                          :class="item.url === formLabelAlign.imageUrl ? 'active' : ''"
                        />
                      </div>
                    </div>
                  </div>
                </div> -->
                <CoverList ref="coverListRef" v-model:realNameVal="formLabelAlign.realName" v-model:remarksVal="formLabelAlign.remarks" v-model:imageUrlVal="formLabelAlign.imageUrl" ></CoverList>
              </el-form-item>
            </el-form>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleClose"> 保存设置 </el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="成员设置" name="second">
          <Power :treeNodeId="formLabelAlign.id" :createBy="createBy" ref="powerNode" />
        </el-tab-pane>
        <el-tab-pane label="更多" name="third">
          <div class="more">
            <p>知识库管理</p>
            <el-alert
              title="删除当前知识库以及其所有页面。删除后若要恢复，需联系企业知识库管理员，请谨慎进行"
              type="warning"
              show-icon
              :closable="false"
            />
            <el-button type="danger" @click="onDelete">删除知识库</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import CoverList from './cover-list.vue';

// 自定义组件
import Power from '@/views/enterpriseDoc/component/power/index.vue';
// 接口
import { apiEnterpriseFilesTreeEditKnowLab, apiEnterpriseFilesTreeDeleteKnowLab } from '@/api/enterpriseDoc/enterpriseListApi';
import { ref, reactive ,getCurrentInstance,toRefs} from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { ElMessage, ElMessageBox } from 'element-plus';
const { wiki_type } = toRefs<any>(proxy?.useDict('wiki_type'));
import cover1 from '../../../../assets/images/enterprise/cover1.png';
import cover2 from '../../../../assets/images/enterprise/cover2.png';
import cover3 from '../../../../assets/images/enterprise/cover3.png';
import cover4 from '../../../../assets/images/enterprise/cover4.png';
import cover5 from '../../../../assets/images/enterprise/cover5.png';
import cover6 from '../../../../assets/images/enterprise/cover6.png';
import cover7 from '../../../../assets/images/enterprise/cover7.png';
import cover8 from '../../../../assets/images/enterprise/cover8.png';
import cover9 from '../../../../assets/images/enterprise/cover9.png';
import cover10 from '../../../../assets/images/enterprise/cover10.png';
import cover11 from '../../../../assets/images/enterprise/cover11.png';
import cover12 from '../../../../assets/images/enterprise/cover12.png';
const imgList: any = ref([
  { name: 'cover1.png', url: cover1 },
  { name: 'cover2.png', url: cover2 },
  { name: 'cover3.png', url: cover3 },
  { name: 'cover4.png', url: cover4 },
  { name: 'cover5.png', url: cover5 },
  { name: 'cover6.png', url: cover6 },
  { name: 'cover7.png', url: cover7 },
  { name: 'cover8.png', url: cover8 },
  { name: 'cover9.png', url: cover9 },
  { name: 'cover10.png', url: cover10 },
  { name: 'cover11.png', url: cover11 },
  { name: 'cover12.png', url: cover12 }
]);
const emits = defineEmits(['onRefresh']); //参数为数组
const powerNode = ref(); // usePower组件实例
//////////////////////////////////////////////tab切换 start //////////////////////
const activeName = ref('first');
// 点击tab切换
const handleClick = (tab, event) => {
  if (tab.props.label === '成员设置') {
    powerNode.value.getTableData();
  }
};
//////////////////////////////////////////////tab切换 end //////////////////////////////

//////////////////////////////////////////////  基本信息操作 start //////////////////////
const coverListRef = ref(null)
const formRef = ref(null);
// 表单数据
const formLabelAlign = reactive({
  realName: '',
  classify: '',
  remarks: '',
  id: '',
  imageUrl: '',
  coverUrl:'',
  sort: 99,
  location:''
});
const isShowLocation = ref(false);
const imgSrc = (name: string) => {
  let url: string;
  let res = imgList.value.map((item) => {
    if (item.name == name) {
      url = item.url;
    }
  });
  return url;
};
// 表单校验
const rules = reactive<any>({
  realName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  location: [{ required: true, message: '请输入地址', trigger: 'blur' }]
});
// 表单提交
const handleClose = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = await apiEnterpriseFilesTreeEditKnowLab(formLabelAlign);
      if (res.code === 200) {
        ElMessage.success('保存成功');
        emits('onRefresh');
      }
    }
  });
};
//////////////////////////////////////////////  基本信息操作 end //////////////////////

//////////////////////////////////////////////  成员设置操作 start //////////

//////////////////////////////////////////////  成员设置操作 end //////////

////////////////////////////////////////////// 更多操作 start //////////////////////


const onDelete = () => {
  ElMessageBox.confirm('确认删除当前知识库以及其所有页面?')
    .then(async () => {
      let res = await apiEnterpriseFilesTreeDeleteKnowLab({ id: formLabelAlign.id });
      if (res.code === 200) {
        ElMessage.success('删除成功');
        onClose();
        emits('onRefresh');
      }
    })
    .catch(() => {
      // catch error
    });
};
//////////////////////////////////////////////  更多操作 end //////////////////////
//////////////////////////////////////////////  弹窗操作 start //////////////////////
const dialogVisible = ref(false);
// 打开弹窗回调
const dialogOpen = () =>{
  nextTick(() => {
    coverListRef.value.openCoverList('edit',formLabelAlign);
  });
}
const createBy = ref('');
// 打开弹窗
const addClick = (item: any) => {
  dialogVisible.value = true;
  activeName.value = 'first';
  formLabelAlign.realName = item.realName;
  formLabelAlign.classify = item.classify;
  formLabelAlign.remarks = item.remarks;
  formLabelAlign.id = item.id;
  formLabelAlign.imageUrl = item.imageUrl;
  formLabelAlign.coverUrl = item.coverUrl;
  formLabelAlign.sort = item.sort;
  formLabelAlign.location = item.location;
  createBy.value = item.createBy;
  if(formLabelAlign.location){
    isShowLocation.value = true;
  }else{
    isShowLocation.value = false;
  }
};
// 关闭弹窗
const onClose = () => {
  dialogVisible.value = false;
  formRef.value.resetFields();
};
//////////////////////////////////////////////  弹窗操作 end //////////////////////
defineExpose({
  addClick
});
</script>
<style scoped lang='scss'>
:deep(.el-dialog__header) {
  padding: 0 !important;
  padding-bottom: 10px !important;
}
.cover_box {
  display: flex;
  .cover_img {
    position: relative;
    margin-right: 20px;
    margin-top: 32px;
    img {
      width: 207px;
      height: 300px;
      border-radius: 8px;
    }
    .cover_img_text {
      position: absolute;
      top: 1px;
      padding: 25px;
      p {
        margin: 0;
        color: white;
        font-size: 23px;
        line-height: 30px;
      }
      span {
        color: white;
        font-size: 13px;
      }
    }
  }
  .cover_list {
    .cover_list_item {
      p {
        margin: 0;
        font-size: 12px;
      }
      img {
        width: 72px;
        height: 98px;
        border-radius: 8px;
      }
      .cover_list_img {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        .active {
          border: 3px solid rgb(20, 86, 240);
        }
      }
    }
  }
}
.enterpriseList_set {
  :deep(.el-dialog__body) {
    height: 500px;
    padding-top: 0 !important;
    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__content {
        flex: 1;
        .el-tab-pane {
          height: 100%;
          .basic_information {
            height: 100%;
            display: flex;
            flex-direction: column;
            .el-form {
              flex: 1;
              overflow-y: auto;
            }
            .dialog-footer {
              padding-top: 10px;
            }
          }
          .more {
            p {
              margin: 0;
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 20px;
            }
            .el-alert--warning {
              background-color: #fee7cd;
              color: #333;
              i {
                color: #ff811a;
              }
            }
            .el-button {
              margin-top: 30px;
            }
          }
        }
      }
    }
  }
}
</style>